<template>
  <div class="timeline-item">
    <div class="timeline-content">
      <slot></slot>
    </div>
    <div class="timeline-time">
      <div class="timeline-circle"></div>
      <span class="timeline-text">{{time}}</span>
    </div>
    <div class="timeline-line"></div>
  </div>
</template>

<script>
export default {
  props: {
    time: {
      type: String
    }
  }
}
</script>

<style lang="less">
.timeline-item {
  padding-bottom: 15px;
  position: relative;

  .timeline-time {
    position: absolute;
    top: 20px;
    left: -45px;
    z-index: 2;
    transform: translate(-50%, -50%);

    .timeline-circle {
      display: inline-block;
      width:10px;
      height:10px;
      background:#fff;
      box-shadow:0px 2px 4px 0px rgba(236,112,67,0.52);
      border-radius: 50%;
    }

    .timeline-text {
      position: absolute;
      margin-left: 3px;
      font-size: 12px;
      top: 4px;
      color: #999;
      white-space: nowrap;
    }
  }

  &:first-child {
    .timeline-text {
      color: #ff5a00;
    }

    .timeline-circle {
      background:linear-gradient(90deg,rgba(237,127,49,1) 0%,rgba(232,48,46,1) 100%);
    }
  }

  .timeline-line {
    position: absolute;
    top: 16px;
    left: -45px;
    background-color: #ececec;
    height: 100%;
    width: 2px;
  }
}
</style>
